<template>
    <div class="main_con">
      
        <div style="text-align: left;">
            <H2>课表</H2>
            <!-- 选择 -->
    <el-select v-model="values" clearable placeholder="请选择" @change="requests">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value" >
    </el-option>
  </el-select>
            <el-divider></el-divider>
        </div>
 <!-- 日历 -->
        <el-calendar v-model="value">
            <div class="acc" slot="dateCell" slot-scope="{date, data}" @click="handDateclick(data)">
                {{ data.day.split('-').slice(1).join('-') }}
                <!-- <el-tag type="danger" v-if="isWeek(date)" > -->
                <el-tag type="danger" v-if="scheduleData[data.day]!== undefined&&(scheduleData[data.day]!== '休息')&&scheduleData[data.day]!== ''">
                     {{scheduleData[data.day]}}
                </el-tag>
                <el-tag type="success" v-if="scheduleData[data.day]=== '休息'">
                     {{scheduleData[data.day]}}
                </el-tag>

            </div>
        </el-calendar>
        <!-- 课程编辑 -->
        <el-dialog title="课表编辑" :visible.sync="dialogTableVisible"
:before-close="handclose">
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  
  <el-form-item label="时间: ">
    <el-input v-model="sizeForm.riqi"></el-input>
  </el-form-item>
  <el-form-item label="更改信息: ">
    <el-input v-model="sizeForm.content"></el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">确认更新</el-button>
    <el-button type="danger" @click="del">删除</el-button>
    <el-button @click="exit">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
    </div>
</template>
 
<script>
export default {
    name: "PatrolSchedule",
    components: {},
    data() {
        return {
            // value: new Date(),
             scheduleData: {},
            // value:new Date(),
            options: [{
          value: '小羊一班',
          label: '小羊一班'
        }, {
          value: '小羊二班',
          label: '小羊二班'
        }],
        sizeForm:{
            content:'',
            riqi:''
        },
        values: '',
        value: new Date(),
        dialogTableVisible: false,
        token:''
        };
    },
    mounted() {
      this.token=localStorage.getItem('token');
      this.$store.commit('isShow')
    },
    methods: {
    // 删除日历信息
        del(){
          if(this.values=="小羊一班"){
            this.axios.get("/delclass1/"+this.sizeForm.riqi,{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                console.log(res);
                this.requests()
                this.dialogTableVisible=false;
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        
      })
          }
          else if(this.values=="小羊二班"){
            this.axios.get("/delclass2/"+this.sizeForm.riqi,{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                console.log(res);
        // this.student()
        this.requests()
        this.dialogTableVisible=false;
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        
      })
          }
            
        },
        onSubmit() {
            if(this.values=="小羊一班"&&this.sizeForm.content!=''){
                this.axios.post("/insertclass1",this.sizeForm,
                {headers:{
              'token':this.token,
            }}
        ).then((res)=>{
          if(res.data.msg!="error"){
                 this.$message({
          showClose: true,
          message: '恭喜你，添加课表信息成功!',
          type: 'success'
        });
        this.requests()
        this.dialogTableVisible=false;
        this.sizeForm.content=''
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
         
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!添加课表信息失败!',
          type: 'warning'
        });
      })
}
    else if(this.values=="小羊二班"){
                this.axios.post("/insertclass2",this.sizeForm,
                {
                  headers:{
              'token':this.token
            }}
        ).then((res)=>{
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，添加课表信息成功!',
          type: 'success'
        });
        this.requests()
        this.dialogTableVisible=false;
        this.sizeForm.content=''
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
          
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!添加课表信息失败!',
          type: 'warning'
        });
      })
      
            }
        
      },
        exit(){
      // this.httpRequestImg = true
        this.dialogTableVisible=false;
        this.sizeForm.content=''
        
      },
      handclose(){
        this.dialogTableVisible=false;
        this.sizeForm.content=''
      },
        //获取当前日历时间
        handDateclick(value){
            this.sizeForm.riqi=value.day;
            this.sizeForm.content=this.scheduleData[value.day];
            // 
            if(this.values){
                this.dialogTableVisible = true;
            
            }
            else{
                this.dialogTableVisible = false;
                this.sizeForm.riqi=''
                this.$message({
          showClose: true,
          message: '请先选择你要查找的班级!',
          type: 'warning'
        });
            }
            

        },
      //小羊一班课表请求
      async class1(){
            await this.axios.get("/class1",{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                const result=res.data.data;
                this.scheduleData=result
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
                
      })
      console.log(this.scheduleData);
        },
      //小羊二班课表请求
      async class2(){
        await this.axios.get("/class2",{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                const result=res.data.data;
                this.scheduleData=result
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
      })
      console.log(this.scheduleData);
      },
      requests(){
        if(this.values=="小羊一班"){
            this.class1()
        }
        else if(this.values=="小羊二班"){
            this.class2()
        }
        // console.log(this.value);
      },
        getDay(date){
            return date.getDate()
        },
        isWeek(date){
            if(date.getDay()===6||date.getDay()===0){
                return true;
            }
        },
        
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-calendar-day {
    box-sizing: border-box;
    padding: 5px;
    height: 80px;
}
.acc{
    width: 100%;
    height: 100%;
}
/deep/ .el-dialog{
  width: 30%;
}
/deep/ .el-form-item__label{
  font-size: 16px;
}
/deep/ .el-input--mini {
    font-size: 18px;
}
/deep/ .el-form-item__label {
    line-height: 24px;
}
</style>